import { Typography } from "antd"
import { TitleProps } from "antd/es/typography/Title"
import styled from "styled-components"

const { Title, Link } = Typography

type WrapperSystemLogoProps = React.HTMLProps<HTMLDivElement> & {
	$showlogo: boolean
}

type GlobalTitleProps = TitleProps & {
	$showtitle: boolean
}

export const WrapperSystemLogo = styled.div<WrapperSystemLogoProps>`
	display: ${props => (props.$showlogo ? "block" : "none")};
`

export const GlobalTitle = styled(Title)<GlobalTitleProps>`
	&& {
		display: ${props => (props.$showtitle ? "block" : "none")};
		margin: auto;
		font-size: 18px;
		font-weight: 700;
		color: #409eff;
	}
`

export const WrapperLink = styled(Link)`
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
	padding-top: 16px;
	padding-bottom: 16px;
`
